<template>
  <div class="echartsSty">
    <div ref="pie1" style="width: 600px; height: 400px">

    </div>
    <div ref="pie2" style="width: 600px; height: 400px">

    </div>
    <div ref="Line1" style="width: 600px; height: 400px">

    </div>
    <div ref="Bar1" style="width: 600px; height: 400px">

    </div>

  </div>
</template>

<script>
import * as echarts from 'echarts';
import {queryCxcyXmLXBL, queryCxcyXmZZBL, queryCxcyXmHJFiveYear, queryCxcyXmHJFiveYearByLX} from "@/api/xmtj";
import axios from "@/axios/axios";

export default {
  data() {
    return {
      name: "",
      xy: [],
    }
  },
  mounted() {
    this.initPie1();
    this.initPie2();
    this.initLine1();
    this.initBar1();
  },
  methods: {
    initPie1() {
      var data;
      queryCxcyXmZZBL().then(res => {
        if (res.code == "200") {
          data = res.data
        } else {
          data = [
            {value: 12, name: '工学院'},
            {value: 7, name: '商学院'},
            {value: 7, name: '学前教育学院'},
            {value: 5, name: '医学院'},
            {value: 6, name: '设计学院'},
            {value: 8, name: '音乐舞蹈学院'},
            {value: 4, name: '人文学院'},
            {value: 3, name: '马克思主义学院'},
            {value: 8, name: '外国语'}
          ]
        }
        let myChart1 = echarts.init(this.$refs.pie1);
        var option;
        option = {
          title: {
            text: '各学院创新创业项目在驻比例',
            left: 'center'
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            top: '5%',
            left: 'center'
          },
          series: [
            {
              name: '',
              type: 'pie',
              radius: ['35%', '50%'],
              avoidLabelOverlap: false,
              padAngle: 1,
              itemStyle: {
                borderRadius: 10
              },
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: 20,
                  fontWeight: 'bold'
                },
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              },
              labelLine: {
                show: true
              },
              data: data
            }
          ]
        };

        option && myChart1.setOption(option);
        myChart1.resize({
          width: 500,
          height: 500
        });

      })

    },
    initPie2() {
      var data;
      queryCxcyXmLXBL().then(res => {
        if (res.code == "200") {
          data = res.data
        } else {
          data = [
            {value: 12, name: '现代农业'},
            {value: 7, name: '制造业'},
            {value: 18, name: '信息技术服务'},
            {value: 9, name: '文化创意服务'},
            {value: 8, name: '社会服务'}
          ]
        }
        let myChart2 = echarts.init(this.$refs.pie2);
        var option;
        option = {
          title: {
            text: '各类型项目比例情况',
            left: 'center'
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 'left'
          },
          series: [
            {
              type: 'pie',
              radius: '50%',
              data: data,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        };

        option && myChart2.setOption(option);
        myChart2.resize({
          width: 500,
          height: 500
        });
      })
    },
    initLine1() {
      var seriesList;
      queryCxcyXmHJFiveYear().then(res => {
        if (res.code == "200") {
          seriesList = res.data.seriesList
        } else {
          seriesList = [
            {
              name: '工学院',
              type: 'line',
              data: [12, 14, 13, 14, 15]
            },
            {
              name: '商学院',
              type: 'line',
              data: [10, 7, 9, 16, 19]
            },
            {
              name: '学前教育学院',
              type: 'line',
              data: [5, 3, 6, 8, 7]
            },
            {
              name: '医学院',
              type: 'line',
              data: [4, 5, 9, 7, 5]
            },
            {
              name: '设计学院',
              type: 'line',
              data: [3, 5, 7, 9, 8]
            },
            {
              name: '音乐舞蹈学院',
              type: 'line',
              data: [6, 5, 8, 4, 6]
            },
            {
              name: '人文学院',
              type: 'line',
              data: [8, 5, 6, 4, 5]
            },
            {
              name: '马克思主义学院',
              type: 'line',
              data: [5, 5, 8, 6, 7]
            },
            {
              name: '外国语',
              type: 'line',
              data: [7, 8, 8, 9, 6]
            },
          ]
        }
        let myChart3 = echarts.init(this.$refs.Line1);
        var option;
        option = {
          title: {
            text: '近五年各学院获奖趋势'
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            type: 'scroll',
            shadowBlur: 3,
            show: true,
            top: "6%",
            data: res.data.xyMcList
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: res.data.yearList
          },
          yAxis: {
            type: 'value',
            scale: true,
            minInterval: 1,
            min: 0
          },
          series:seriesList
        };

        option && myChart3.setOption(option);

        myChart3.resize({
          width: 500,
          height: 400
        });
      })
    },
    initBar1() {
      var seriesList;
      queryCxcyXmHJFiveYearByLX().then(res => {
        if (res.code == "200") {
          seriesList = res.data.seriesList
        } else {
          seriesList = [
            {
              name: '现代农业', //名称
              type: 'bar', //类型 柱状图
              stack: 'one', //数据系列的堆叠名称为'one'，表示该系列会和其他具有相同堆叠名称的系列堆叠在一起
              barWidth: '60%', //柱的宽度
              emphasis: emphasisStyle, //强调样式
              data: [7, 8, 8, 9, 6]
            },
            {
              name: '制造业',
              type: 'bar',
              stack: 'one',
              barWidth: '60%',
              emphasis: emphasisStyle,
              data: [12, 14, 13, 14, 15]
            },
            {
              name: '信息技术服务',
              type: 'bar',
              stack: 'one',
              barWidth: '60%',
              emphasis: emphasisStyle,
              data: [12, 5, 8, 14, 15]
            },
            {
              name: '文化创意服务',
              type: 'bar',
              stack: 'one',
              barWidth: '60%',
              emphasis: emphasisStyle,
              data: [8, 15, 13, 19, 12]
            },
            {
              name: '社会服务',
              type: 'bar',
              stack: 'one',
              barWidth: '60%',
              emphasis: emphasisStyle,
              data: [8, 16, 13, 9, 16]
            }
          ]
        }

      let myChart4 = echarts.init(this.$refs.Bar1);
      var option;
      var emphasisStyle = {
        itemStyle: {
          shadowBlur: 10, //阴影模糊程度
          shadowColor: 'rgba(0,0,0,0.3)' //阴影的颜色
        }
      };
      option = {
        title: {
          text: '近五年各类型项目所获奖项'
        },
        legend: { //图例数据项
          show: true,
          top: "6%",
          data:  res.data.lxMcList
        },
        brush: { //刷选  只对x轴刷选
          xAxisIndex: 0
        },
        toolbox: {
          show: false, //不显示工具箱
          feature: {
            magicType: { //图表的魔术类型 堆叠
              type: ['stack']
            },
            dataView: {} //支持数据视图功能
          }
        },
        tooltip: {}, //提示框的配置，指定了提示框的触发方式为坐标轴触发，指示器类型为阴影
        xAxis: {
          type: 'category', //类目 类型
          data: res.data.yearList,
          axisLabel: {
            interval: 0,  // 设置间隔为 0，显示所有坐标名
            align: 'right'  // 调整标签对齐方式
          },
          axisTick: {
            alignWithLabel: false //设置x轴刻度不与标签对齐
          }
        },
        yAxis: {
          // min: 0,
          // max: 2100,
          // interval: 300 //间隔
        },
        grid: { //位置和是否包含刻度标签。
          left: '20%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        series:seriesList
      };

      option && myChart4.setOption(option);

      myChart4.resize({
        width: 500,
        height: 400
      });
      })
    },
  }

}
</script>
<style>
.echartsSty {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-around;
  padding: 20px;
  flex-wrap: wrap;
  align-content: space-around;
}
</style>
